import React, {PureComponent} from 'react';
import './login.less';
import logo from './images/logo.png';
import {connect} from 'react-redux'
import {Form, Icon, Input, Button, message, Modal} from 'antd';
import storageUtil from "../../utils/storageUtils";
import {Redirect} from "react-router-dom";
import {login} from '../../redux/actions'

// const Item = Form.Item

/**
 * 后台管理路由组件
 */
class Login extends PureComponent {

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                const {username, password} = values;
                this.props.login(username, password);
                console.log(this.props.history)
                this.props.history.replace('/')
            }
        });
    }

    validatePwd = (rule, value, callback) => {
        console.log('validatePwd()', rule, value)
        if (!value) {
            callback('密码必须输入')
        } else if (value.length < 4) {
            callback('密码长度不能小于 4 位')
        } else if (value.length > 12) {
            callback('密码长度不能大于 12 位')
        } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
            callback('密码必须是英文、数字或下划线组成')
        } else {
            callback() // 验证通过 }
        }
    }
    // login = async (username, password) => {
    //     console.log(' 发送登陆的 ajax  请求', username, password)
    //     const result = await reqLogin(username, password)
    //     console.log('login()', result)
    //     if (result.code === 200) {
    //         message.success("登录成功！", 2);
    //         let user = {"userName": username, "id": result.data.id};
    //         memoryUtils.user = user
    //         storageUtil.saveUser(user)
    //         this.props.history.replace('/')
    //     } else {
    //         message.error(result.message)
    //     }
    //
    // }

    // passwordvalidator=(rule, value, callback)=>{
    //     if(!value){
    //       callback("密码必须输入");
    //     }
    // }

    render() {
        const user = storageUtil.getUser()
        console.log("用户"+user)
        if (user &&user.id) {
            return <Redirect to='/home'/>
        }
        // 得到具强大功能的 form 对象
        const form = this.props.form
        const {getFieldDecorator} = form;
        return (
            <div className="login">
                <header className="login-header">
                    <img src={logo} alt="logo"/>
                    <h1>后台管理系统</h1>
                </header>
                <section className="login-content">
                    <h2>用户登录</h2>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {
                                getFieldDecorator('username', {
                                    rules: [
                                        {required: true, message: '请输入用户名!'},
                                        {whitespace: true, message: '用户名不能包含空格'},
                                        {min: 4, message: '用户名最少4位!'},
                                        {max: 20, message: '用户名最多12位!'},
                                        {pattern: /^[0-9a-zA-Z_@.]+$/, message: '用户名只能是字母数字下划线!'},
                                    ],
                                    initialValue: 'admin', // 初始值
                                })
                                (
                                    <Input
                                        prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                        placeholder="用户名"
                                    />
                                )
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('password', {
                                    rules: [
                                        {required: true, message: '请输入密码!'},
                                        { validator: this.validatePwd}

                                    ],
                                })(
                                    <Input
                                        prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                        type="password"
                                        placeholder="密码"
                                    />
                                )
                            }

                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>

        )
    }
}


const WrapLogin = Form.create()(Login);
export default connect( state => ({user: state.user}), {login} )(WrapLogin)


